<template>
    <view class="wrapper">
        <!-- 个人资料 -->
        <view class="profile">
            <view class="meta">
                <!-- <image class="avatar" src="http://static.botue.com/ugo/uploads/monkey.png"></image> -->
                <!-- <text class="nickname">孙悟空</text> -->
                <open-data class="avatar" type="userAvatarUrl"></open-data>
                <open-data class="nickname" type="userNickName"></open-data>
            </view>
        </view>
        <!-- 统计 -->
        <view class="count">
            <view class="cell"> 8 <text>收藏的店铺</text> </view>
            <view class="cell"> 14 <text>收藏的商品</text> </view>
            <view class="cell"> 18 <text>关注的商品</text> </view>
            <view class="cell"> 84 <text>我的足迹</text> </view>
        </view>
        <!-- 我的订单 -->
        <view class="orders">
            <view class="title">我的订单</view>
            <view class="sorts">
                <text class="icon-bill">待付款</text>
                <text class="icon-car">待收货</text>
                <text class="icon-money">退款/退货</text>
                <text class="icon-list">全部订单</text>
            </view>
        </view>
        <!-- 地址管理 -->
        <view class="address icon-arrow"> 收货地址 </view>
        <!-- 其它 -->
        <view class="extra">
            <view class="item icon-arrow" @click="callSer">联系客服</view>
            <button class="item icon-arrow">意见反馈</button>
            <button class="item icon-arrow" open-type="share">分享优购</button>
        </view>
    </view>
</template>

<script>
import { checkAuth } from "../../utils/mixins/index";

export default {
    methods: {
        callSer() {
            console.log("callSer");
            uni.makePhoneCall({
                phoneNumber: 10086,
            });
        },
    },

    onLoad() {
        checkAuth();
    },
};
</script>

<style scoped lang="less">
.wrapper {
    position: absolute;
    top: 0;
    bottom: 0;

    width: 100%;
    background-color: #f4f4f4;
}

.profile {
    height: 375rpx;
    background-color: #ea4451;
    display: flex;
    justify-content: center;
    align-items: center;

    .meta {
        .avatar {
            width: 140rpx;
            height: 140rpx;
            border-radius: 50%;
            border: 2rpx solid #fff;
        }

        .nickname {
            display: block;
            text-align: center;
            margin-top: 20rpx;
            font-size: 30rpx;
            color: #fff;
        }
    }
}

.count {
    display: flex;
    margin: 0 20rpx;
    height: 100rpx;
    text-align: center;
    border-radius: 4rpx;
    background-color: #fff;

    position: relative;
    top: -27rpx;

    .cell {
        flex: 1;
        padding-top: 16rpx;
        font-size: 27rpx;
        color: #333;
    }

    text {
        display: block;
        font-size: 24rpx;
    }
}

.orders {
    margin: -17rpx 20rpx 0 20rpx;
    padding: 20rpx 0;
    background-color: #fff;
    border-radius: 4rpx;

    .title {
        padding-left: 20rpx;
        font-size: 30rpx;
        color: #333;
        padding-bottom: 20rpx;
        border-bottom: 1rpx solid #eee;
    }

    .sorts {
        padding-top: 30rpx;
        text-align: center;
        display: flex;
    }

    [class*="icon-"] {
        flex: 1;
        font-size: 24rpx;

        &::before {
            display: block;
            font-size: 48rpx;
            margin-bottom: 8rpx;
            color: #ea4451;
        }
    }
}

.address {
    line-height: 1;
    background-color: #fff;
    font-size: 30rpx;
    padding: 25rpx 0 25rpx 20rpx;
    margin: 10rpx 20rpx;
    color: #333;
    border-radius: 4rpx;
}

.extra {
    margin: 0 20rpx;
    background-color: #fff;
    border-radius: 4rpx;

    .item {
        line-height: 1;
        padding: 25rpx 0 25rpx 20rpx;
        border-bottom: 1rpx solid #eee;
        font-size: 30rpx;
        color: #333;
    }

    button {
        text-align: left;
        background-color: #fff;

        &::after {
            border: none;
            border-radius: 0;
        }
    }
}

.icon-arrow {
    position: relative;

    &::before {
        position: absolute;
        top: 50%;
        right: 20rpx;
        transform: translateY(-50%);
    }
}
</style>
